<html><!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>Demo - DPL SplitButton</title>
    <link href="assets/base.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/split-button/assets/base.css" rel="stylesheet"/>
    <link href="assets/tables.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/split-button/assets/tables.css" rel="stylesheet"/>
    <link href="assets/button-dpl.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/split-button/assets/button-dpl.css" rel="stylesheet"/>
    <link href="assets/menu-dpl.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/split-button/assets/menu-dpl.css" rel="stylesheet"/>
    <link href="assets/menubutton-dpl.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/split-button/assets/menubutton-dpl.css" rel="stylesheet"/>
    <link href="assets/splitbutton-dpl.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/split-button/assets/splitbutton-dpl.css" rel="stylesheet"/>
    <link href="assets/docs.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/split-button/assets/docs.css" rel="stylesheet"/>
    <style>
        .para {
            margin: 1em 0;
        }
        .container {
            width: 100%;
        }
    </style>
</head>
<body>

<div class="container">

<div class="page-header">
    <h1>下拉按钮
        <small>构建支持下拉菜单的按钮组</small>
    </h1>
</div>
<div id="split">
<h2>分离式下拉按钮</h2>

<div class="row">
<div class="span8">
<h3>概述和示例</h3>

<p>在分组按钮的样式和标签基础上我们可以很容易的创建分离式下拉按钮。分离式下拉按钮左边部分有标准的按钮功能，右边部分有一个下拉菜单。</p>

<div class="para">
    <div class="ks-split-button">
        <div class="ks-button ks-split-button-left"
             tabindex="0">Action
        </div>
        <div class="ks-menu-button ks-button ks-split-button-right"
             tabindex="0">
            <div class="ks-menu-button-content"></div>
            <div class="ks-menu-button-dropdown">
                <div class="ks-menu-button-dropdown-inner"></div>
            </div>
            <div class="ks-popupmenu ks-menu">
                <div class="ks-popupmenu-content">
                    <div class="ks-menuitem">Action</div>
                    <div class="ks-menuitem">Another</div>
                    <div class="ks-menuitem">else</div>
                </div>
            </div>
        </div>
    </div>
    <!-- /ks-split-button -->
    <div class="ks-split-button">
        <div class="ks-button ks-button-primary ks-split-button-left"
             tabindex="0">Action
        </div>
        <div class="ks-menu-button ks-button ks-button-primary ks-split-button-right"
             tabindex="0">
            <div class="ks-menu-button-content"></div>
            <div class="ks-menu-button-dropdown">
                <div class="ks-menu-button-dropdown-inner"></div>
            </div>
            <div class="ks-popupmenu ks-menu">
                <div class="ks-popupmenu-content">
                    <div class="ks-menuitem">Action</div>
                    <div class="ks-menuitem">Another</div>
                    <div class="ks-menuitem">else</div>
                </div>
            </div>
        </div>

    </div>
    <!-- /ks-split-button -->
    <div class="ks-split-button">
        <div class="ks-button ks-button-danger ks-split-button-left"
             tabindex="0">Danger
        </div>
        <div class="ks-menu-button ks-button ks-button-danger ks-split-button-right"
             tabindex="0">
            <div class="ks-menu-button-content"></div>
            <div class="ks-menu-button-dropdown">
                <div class="ks-menu-button-dropdown-inner"></div>
            </div>
            <div class="ks-popupmenu ks-menu">
                <div class="ks-popupmenu-content">
                    <div class="ks-menuitem">Action</div>
                    <div class="ks-menuitem">Another</div>
                    <div class="ks-menuitem">else</div>
                </div>
            </div>
        </div>

    </div>
    <!-- /ks-split-button -->
</div>
<div class="para">
    <div class="ks-split-button">
        <div class="ks-button ks-button-warning ks-split-button-left"
             tabindex="0">Warning
        </div>
        <div class="ks-menu-button ks-button ks-button-warning ks-split-button-right"
             tabindex="0">
            <div class="ks-menu-button-content"></div>
            <div class="ks-menu-button-dropdown">
                <div class="ks-menu-button-dropdown-inner"></div>
            </div>
            <div class="ks-popupmenu ks-menu">
                <div class="ks-popupmenu-content">
                    <div class="ks-menuitem">Action</div>
                    <div class="ks-menuitem">Another</div>
                    <div class="ks-menuitem">else</div>
                </div>
            </div>
        </div>

    </div>
    <!-- /ks-split-button -->
    <div class="ks-split-button">
        <div class="ks-button ks-button-success ks-split-button-left"
             tabindex="0">Success
        </div>
        <div class="ks-menu-button ks-button ks-button-success ks-split-button-right"
             tabindex="0">
            <div class="ks-menu-button-content"></div>
            <div class="ks-menu-button-dropdown">
                <div class="ks-menu-button-dropdown-inner"></div>
            </div>
            <div class="ks-popupmenu ks-menu">
                <div class="ks-popupmenu-content">
                    <div class="ks-menuitem">Action</div>
                    <div class="ks-menuitem">Another</div>
                    <div class="ks-menuitem">else</div>
                </div>
            </div>
        </div>

    </div>
    <!-- /ks-split-button -->
    <div class="ks-split-button">
        <div class="ks-button ks-button-info ks-split-button-left"
             tabindex="0">Info
        </div>
        <div class="ks-menu-button ks-button ks-button-info ks-split-button-right"
             tabindex="0">
            <div class="ks-menu-button-content"></div>
            <div class="ks-menu-button-dropdown">
                <div class="ks-menu-button-dropdown-inner"></div>
            </div>
            <div class="ks-popupmenu ks-menu">
                <div class="ks-popupmenu-content">
                    <div class="ks-menuitem">Action</div>
                    <div class="ks-menuitem">Another</div>
                    <div class="ks-menuitem">else</div>
                </div>
            </div>
        </div>
    </div>
    <!-- /ks-split-button -->
</div>
<div class="para">
    <div class="ks-split-button">
        <div class="ks-button ks-button-inverse ks-split-button-left"
             tabindex="0">Inverse
        </div>
        <div class="ks-menu-button ks-button ks-button-inverse ks-split-button-right"
             tabindex="0">
            <div class="ks-menu-button-content"></div>
            <div class="ks-menu-button-dropdown">
                <div class="ks-menu-button-dropdown-inner"></div>
            </div>
            <div class="ks-popupmenu ks-menu">
                <div class="ks-popupmenu-content">
                    <div class="ks-menuitem">Action</div>
                    <div class="ks-menuitem">Another</div>
                    <div class="ks-menuitem">else</div>
                </div>
            </div>
        </div>
    </div>
    <!-- /ks-split-button -->
</div>
<!-- /ks-button-toolbar -->
</div>
<script src="../../../../../../g.alicdn.com/kissy/k/1.4.7/seed.js" tppabs="http://g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
<script>
KISSY.use('json, gallery/pageNotification/1.0/index', function(S, JSON, PN) {
    var pn = new PN({
        "closeButton": true,
        "positionClass": "page-notification-top-right",
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    });

    window.alert = function() {
        var args = arguments[0];
        args = S.isObject(args) ? JSON.stringify(args) : args.toString();
        pn.success(args);
    };

    KISSY.getScript('assets/demo1.js');
});
</script>
</body>
</html>